/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="page-cluster-deploy__server-detail">
        <div class="detail-wrap">
            <div class="header">
                <img src="/static/img/server_normal.svg" alt=""/>
                <span><lang>管理节点</lang></span>

                <!-- <i class="iconfont iconsip-edit" @click="editFrom"></i> -->
            </div>
            <div class="main">
                <div v-for="item in infoList" :key="item.label" class="info-item">
                    <span class="info-label">{{ item.label }} :</span>
                    <span v-if="!item.isPassword" class="info-value" :title="item.value">{{ item.value }}</span>
                    <password-item v-if="item.isPassword" class="info-value" v-model="item.value"/>
                </div>
            </div>
        </div>
        <div class="detail-wrap">
            <div class="header">
                <img src="/static/img/server_normal.svg" alt=""/><span><lang>资源使用情况</lang></span>
            </div>
            <div class="main charts_style--average">
                <server-detail-charts ref="charts"
                                      class="charts"
                                      v-for="(item, title) in HostsDetail"
                                      v-bind='item'
                                      :key="title"
                                      :title="titles[title]"
                                      :hideFlag="title === 'cpu'"/>
            </div>
        </div>
    </div>
</template>

<script>
import DetailPanel from '../detail_panel';
import ServerDetailCharts from '../echarts_demo/cluster_charts.vue';

const TITLE = {
    cpu: _('CPU使用率'),
    disk: _('存储使用率'),
    memory: _('内存使用率')
};

export default {

    mixins: [DetailPanel],

    data () {
        return {

            //host数据
            HostsDetail: {}
        };
    },

    computed: {

        titles () {
            return TITLE;
        }
    },

    components: {
        ServerDetailCharts
    }

};
</script>

<style lang="less">
.charts_style--average {
    position: relative;
    min-height: 120px;

    .charts {
        position: absolute;
        width: 45%;
        height: 100px;
        display: inline-block;

        &:first-of-type {
            left: -15px;
        }

        &:nth-child(2) {
            left: 75px;
        }

        &:nth-child(3) {
            left: 240px;
        }
    }
}
</style>
